今天本來要帶大家玩 用 canvas 完成拼圖

參考的範例在這裡

很可惜又是時間不足

先把目前完成的階段貼在這

import "./styles.css";
import Sketch from "react-p5";
import p5 from "p5";
// import Puzzle from "./puzzle";
import { useState } from "react";

let windowWidth = 500;
let windowHeight = 500;

let imgCb = p5.Image;

export default function App() {
  const [puzzle, setPuzzle] = useState(null);
  const preload = (p5) => {
    imgCb = p5.loadImage(
      "https://4.bp.blogspot.com/-2vB_Fmsas04/WTnxS5OAAEI/AAAAAAAAAks/MQg6duIbikUtJmp9curdAi7K5H9ByxQOwCLcB/s640/Screenshot_2017-06-08-22-52-19.png"
    );
  };

  const setup = (p5, canvasParentRef) => {
    p5.createCanvas(imgCb?.width, imgCb?.height);
    p5.image(imgCb, 0, 0);
    // let x0 = windowWidth / 2 - imgCb.width / 2;
    // let y0 = windowHeight / 2 - imgCb.height / 2;
    //  puzzle = new Puzzle(x0, y0, imgCb, 3);
    console.log("imgCb", imgCb);
    // setPuzzle(new Puzzle(x0, y0, imgCb, 3));
  };

  const draw = (p5) => {
    // p5.clear();
    // puzzle.draw();
  };

  const mousePressed = (e) => {
    //   puzzle.mousePressed(e?.mouseX, e?.mouseY);
  };

  const mouseDragged = (event) => {
    // puzzle.mouseDragged(event?.mouseX, event?.mouseY);
  };

  const mouseReleased = () => {
    // puzzle.mouseReleased();
  };

  return (
    <div className="App">
      <Sketch
        preload={preload}
        setup={setup}
        draw={draw}
        mouseReleased={mouseReleased}
        mouseDragged={mouseDragged}
        mousePressed={mousePressed}
      ></Sketch>
    </div>
  );
}